<div class="form-horizontal">
  <label for="sortBy" class="small--hide">{{ 'collections.sorting.title' | t }}</label>
  <select name="sortBy" id="sortBy">
    <option value="manual">{{ 'collections.sorting.featured' | t }}</option>
    <option value="best-selling">{{ 'collections.sorting.best_selling' | t }}</option>
    <option value="title-ascending">{{ 'collections.sorting.az' | t }}</option>
    <option value="title-descending">{{ 'collections.sorting.za' | t }}</option>
    <option value="price-ascending">{{ 'collections.sorting.price_ascending' | t }}</option>
    <option value="price-descending">{{ 'collections.sorting.price_descending' | t }}</option>
    <option value="created-descending">{{ 'collections.sorting.date_descending' | t }}</option>
    <option value="created-ascending">{{ 'collections.sorting.date_ascending' | t }}</option>
  </select>
</div>

<script>
  Shopify.queryParams = {};
  if (location.search.length) {
    for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
      aKeyValue = aCouples[i].split('=');
      if (aKeyValue.length > 1) {
        Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
      }
    }
  }

  $(function() {
    $('#sortBy')
      // select the current sort order
      .val('{{ collection.sort_by | default: collection.default_sort_by | escape }}')
      .bind('change', function() {
        Shopify.queryParams.sort_by = jQuery(this).val();
        location.search = jQuery.param(Shopify.queryParams).replace(/\+/g, '%20');
      }
    );
  });
</script>